<template>
  <p>App</p>
  <!-- 
    插槽
      1. 默认插槽

      2. 具名插槽

      3. 作用域插槽
   -->
  <A>
    <!-- <p>1111111</p>
    <p>2222222</p>
    <p>3333333</p>
    <p>4444444</p> -->

    <!-- <template v-slot:default>
      <p>1111111</p>
      <p>2222222</p>
      <p>3333333</p>
      <p>4444444</p>
    </template> -->

    <template #default>
      <p>1111111</p>
      <p>2222222</p>
      <p>3333333</p>
      <p>4444444</p>
    </template>
  </A>

  <B>
    <!-- 
      一般最重要的内容使用默认插槽
      如果有其他内容渲染到不同位置，用具名插槽
     -->
    <template v-slot:header>
      <header>头部</header>
    </template>

    <section>内容</section>

    <template #footer>
      <footer>底部</footer>
    </template>
  </B>

  <C>
    <!-- 默认插槽使用作用域插槽 -->
    <!-- <template #default="{ aaa }">
      <div>默认插槽 {{ aaa }}</div>
    </template> -->

    <template v-slot="scoped">
      <div>默认插槽 {{ scoped.aaa }}</div>
    </template>
    <!-- 具名插槽使用作用域插槽 -->

    <!-- <template v-slot:footer="{ aaa }">
      <div>具名插槽 {{ aaa }}</div>
    </template> -->

    <template #footer="{ aaa }">
      <div>具名插槽 {{ aaa }}</div>
    </template>
  </C>
</template>

<script lang="ts">
/*
  vue2的组件间通信：
    重要：
      1. props 父 -> 子
      2. 自定义事件 子 -> 父
      3. .sync 父 <-> 子
      4. v-model 父 <-> 子
      5. vuex 兄弟、祖孙
      6. 插槽 父 <-> 子
    次要：
      1. $attrs / $listeners
      2. $parent / $children / $refs
      3. 全局事件总线
      4. provide / inject 祖孙

  vue3的组件间通信：
    重要：
      1. props 父 -> 子
      2. 自定义事件 子 -> 父
      3. v-model 父 <-> 子
      4. vuex 兄弟、祖孙
      5. 插槽 父 <-> 子
      6. pinia （取缔vuex）
    次要：
      1. $attrs
      2. $parent / $refs
      3. provide / inject 祖孙
      4. 全局事件总线不能直接使用，移除$on\$once\$off
        由社区提供第三方库可以来使用 mitt
*/
import A from "./A.vue";
import B from "./B.vue";
import C from "./C.vue";

export default {
  name: "App",
  components: {
    A,
    B,
    C,
  },
};
</script>

<style scoped></style>
